<template>
  <el-card class="box-card">
    <!-- mianbaoxue-->
    <my-bread level1="商品管理" level2="商品列表"></my-bread>
    <!-- sousuokuang -->
    <el-row style="margin-top: 20px;">
      <el-col>
        <el-input @clear="queryGoodList()" clearable style="width:300px" placeholder="请输入内容" v-model="query" class="input-with-select">
          <el-button @click.prevent="queryGood()" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button @click.prevent="showAddGoodsDialog()" type="success">添加商品</el-button>
      </el-col>
    </el-row>

    <el-table :data="goodList" style="width: 100%">
      <el-table-column type="index" prop="goods_id" label="id" width="60">
      </el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="80">
      </el-table-column>
      <el-table-column prop="goods_number" label="数量" width="60">
      </el-table-column>

      <el-table-column label="创建日期">
        <template slot-scope="goodList">
          {{goodList.row.add_time|fmtDate}}

        </template>
      </el-table-column>
      <el-table-column prop="goods_state" label="商品状态">

        <template slot-scope="goodList">
          <span v-if="goodList.row.goods_state === 0">未通过</span>
          <span v-else-if="goodList.row.goods_state === 1">审核中</span>
          <span v-else-if="goodList.row.goods_state === 2">已审核</span>
        </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="操作">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary"  icon="el-icon-edit"></el-button>
          <el-button plain size="mini"  icon="el-icon-delete"></el-button>
          <el-button plain size="mini" type="success" icon="el-icon-check"
            circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
      :page-sizes="[4, 6, 8]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

  </el-card>

</template>

<script>
export default {
  data () {
    return {
      query: '',
      dialogFormVisibleGood: false,
      goodList: [],
      pagenum: 1,
      pagesize: 4,
      total: -1
    }
  },
  created () {
    this.queryGoodList()
  },
  methods: {
    async queryGoodList () {
      const res = await this.$http.get('goods', {
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          total: -1
        }
      })
      console.log(res)
      const {
        meta: {
          msg,
          status
        },
        data: {
          pagenum,
          total,
          goods
        }
      } = res.data
      if (status === 200) {
        this.goodList = goods
        this.total = total
        // this.$message.success(msg)
      } else {
        // this.$message.warning(msg)
      }
    },
    queryGood () {
      this.queryGoodList()
    },
    showAddGoodsDialog () {
      this.$router.push({
        name: 'goodsadd'
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.handleCurrentChange(1)
      // this.queryUserList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.queryGoodList()
    }
  }
}
</script>

<style>
</style>
